<template>
    <section class="components-BackTop-box">
        <!--房源对比栏-->
        <aside class="duibi-bar" v-if="isShowHouseContrast">
            <div class="iconfont icon-qiyexinxiduibi">
                <article :class="{'HouseContrast-active': HouseContrastBoxIsShow}" id="HouseContrast-box">
                    <header>
                        <router-link to="/HouseContrast">房源对比 ({{ HouseContrastNumber }})</router-link>
                        <span>上限为3套</span>
                        <a-button type="primary" @click="deleteContrastHouse" :disabled="HouseContrastNumber>0 ? false : true"><i class="iconfont icon-whole_delete"></i> 清空对比栏</a-button>
                    </header>
                    <aside class="duibi-house-content">
                        <ul v-show="!noDataShow">
                            <li class="transition" v-for="(item, index) in HouseContrastItem" :key="index">
                                <a-card :title="null" hoverable :loading="HouseContrastListLoading">
                                    <router-link :to="{path: '/EstateDetails', query: {EstateHouseId: item.id}}" target="_blank">
                                        <img :src="isNullImg(item.photo)" alt="">
                                    </router-link>
                                    <aside>
                                        <router-link :to="{path: '/EstateDetails', query: {EstateHouseId: item.id}}" target="_blank" class="webkit-text-overflow-1lines transition">{{ isNull0(item.title) }}</router-link>
                                        <p class="webkit-text-overflow-1lines"><i class="iconfont icon-dingwei1"></i> {{ isNull0(item.address) }}</p>
                                        <div v-if="item.countryName == '美国'">
                                            <p class="webkit-text-overflow-1lines house-price" v-if="item.minPrice">{{ isNull0_USD(item.minPrice) }} {{ isMinMaxPrice(item.maxPrice) }}</p>
                                            <p class="webkit-text-overflow-1lines house-price" v-else>{{ isNull0_USD(item.price) }}万</p>
                                        </div>
                                        <div v-else-if="item.countryName == '泰国'">
                                            <p class="webkit-text-overflow-1lines house-price" v-if="item.minPrice">{{ isNull0_THB(item.minPrice) }} {{ isMinMaxPrice(item.maxPrice) }}</p>
                                            <p class="webkit-text-overflow-1lines house-price" v-else>{{ isNull0_THB(item.price) }}万</p>
                                        </div>
                                        <div v-else>
                                            <p class="webkit-text-overflow-1lines house-price" v-if="item.minPrice">{{ isNull0_EUR(item.minPrice) }} {{ isMinMaxPrice(item.maxPrice) }}</p>
                                            <p class="webkit-text-overflow-1lines house-price" v-else>{{ isNull0_EUR(item.price) }}万</p>
                                        </div>
                                        <em @click="cencelContrast(item.id)">移出对比</em>
                                    </aside>
                                </a-card>
                            </li>
                        </ul>
                        <h5 style="text-align: center; padding: 15px;" v-show="noDataShow">暂未查询到数据！</h5>
                    </aside>
                </article>
            </div>
        </aside>
        <router-link to="/HelpMeFindHouse" class="HelpMeFindHouse">
            <a-tooltip placement="left" title="帮我找房">
                <a-button><i class="iconfont icon-chakan"></i></a-button>
            </a-tooltip>
        </router-link>
        <div class="qrcode">
            <div></div>
        </div>
        <a-back-top>
            <a-tooltip placement="left" title="返回顶部">
                <div class="top"></div>
            </a-tooltip>
        </a-back-top>

        <p v-show="false">{{getHouseContrast}}</p>
    </section>
</template>

<script>
    export default {
        props: {
            //房源对比容器显示隐藏状态
            isShowHouseContrast:{
                type: Boolean,
                default: false
            },
        },
        data() {
            return {
                HouseContrastIdArr: [],//记录房源对比的id
                HouseContrastNumber: 0,//房源对比栏数据的length
                HouseContrastBoxIsShow: false,//房源对比栏是否显示隐藏

                HouseContrastItem: [],//房源对比栏数据
                HouseContrastListLoading: false,//列表加载loading
                noDataShow: true,//没有数据提示信息是否显示

            }
        },
        computed: {
            //从state获取房源对比栏的数据
            getHouseContrast() {
                if(this.$store.getters.get_HouseContrast){
                    //判断对象是否为空
                    if((this.$store.getters.get_HouseContrast).length != 0){
                        // console.log(Object.keys(this.$store.getters.get_HouseContrast).length)

                        this.HouseContrastIdArr = this.$store.getters.get_HouseContrast;
                        this.HouseContrastNumber = this.$store.getters.get_HouseContrast.length;
                        //获取添加到房源对比栏的数据
                        this.getHouseContrastData(this.$store.getters.get_HouseContrast.join());
                        this.HouseContrastBoxIsShow = true;
                        // localStorage.duibi_houseId = this.HouseContrastIdArr.join();
                    }else{
                        // if(localStorage.duibi_houseId){
                        //     this.HouseContrastBoxIsShow = true;
                        //     this.HouseContrastIdArr = localStorage.duibi_houseId.split(',');
                        //     this.HouseContrastNumber = this.HouseContrastIdArr.length;
                        //     //获取添加到房源对比栏的数据
                        //     this.getHouseContrastData(localStorage.duibi_houseId);
                        // }else{
                            this.HouseContrastIdArr = [];
                            this.HouseContrastNumber = 0;
                            //清空房源对比栏的数据
                            this.HouseContrastItem = [];
                            this.HouseContrastBoxIsShow = false;
                        // }
                    }

                }
                return this.$store.getters.get_HouseContrast
            },
        },
        created() {
        },
        mounted() {
            //判断点击的是否是房源对比栏盒子，是的话则显示房源对比栏盒子，不是的话则隐藏，给body绑定
            if(this.isShowHouseContrast){
                this.$nextTick(() => {
                    window.addEventListener('click', this.HouseContrastBoxIsHidden, false);
                })
            }else{
                return;
            }
        },
        //没有缓存的路由销毁时触发
        destroyed: function() {
            if(this.isShowHouseContrast) {
                window.removeEventListener('click', this.HouseContrastBoxIsHidden, false);//离开的时候注销事件
            }else{
                return;
            }
        },
        //缓存路由退出时触发
        deactivated(){
            if(this.isShowHouseContrast) {
                window.removeEventListener('click', this.HouseContrastBoxIsHidden, false);//离开的时候注销事件
            }else{
                return;
            }
        },
        methods: {
            //获取添加到房源对比栏的数据
            getHouseContrastData(IdArr) {
                this.$get(`house/comparison?ids=${IdArr}`).then(res => {
                    this.HouseContrastListLoading = false;
                    if (res.status == 0) {
                        this.HouseContrastItem = res.data;
                        this.noDataShow = false;
                    } else {
                        console.log(res.msg);
                        this.noDataShow = true;
                    }
                })
            },
            //清空对比栏
            deleteContrastHouse(){
                this.HouseContrastIdArr = [];
                //新房列表页、个人中心-我的收藏房源页使用——房源对比
                this.$store.commit('set_HouseContrast', []);
                this.HouseContrastItem = [];
                this.HouseContrastNumber = 0;
                // localStorage.removeItem('duibi_houseId');
            },
            //取消对比
            cencelContrast (id) {
                this.HouseContrastListLoading = true;
                //-----------------------把对应的值从数组删除-----------------------
                Array.prototype.removeByValue = function(val) {
                    for (var i = 0; i < this.length; i++) {
                        if (this[i] == val) {
                            this.splice(i, 1);
                            break;
                        }
                    }
                };

                this.HouseContrastIdArr.removeByValue(id);
                // localStorage.duibi_houseId = this.HouseContrastIdArr;
                //新房列表页、个人中心-我的收藏房源页使用——房源对比
                this.$store.commit('set_HouseContrast', this.HouseContrastIdArr);

                if(this.HouseContrastIdArr.length == 0){
                    this.$notification['warning']({
                        message: '华美优胜提示您：',
                        description: '对比栏已清空！'
                    });
                    this.HouseContrastListLoading = false;
                }
            },
            //判断点击的是否是房源对比栏盒子，是的话则显示房源对比栏盒子，不是的话则隐藏，给body绑定
            HouseContrastBoxIsHidden: function(e) {
                let father_dom = document.getElementById('HouseContrast-box');
                if (!father_dom.contains(e.target) && e.target.id != 'joinContrast-button' && e.target.id != 'cencelContrast-button') {
                    this.HouseContrastBoxIsShow = false;
                }else{
                    this.HouseContrastBoxIsShow = true;
                }
            },
        },
        watch: {
            //深度监控房源对比栏盒子的隐藏显示状态
            HouseContrastBoxIsShow(val) {
                // console.log( val )
            },
        },
        components: {}
    }
</script>

<style lang="less" type="text/less">
    body {
        .components-BackTop-box {
            position: fixed;
            right: 30px;
            bottom: 90px;
            z-index: 9999;
            cursor: pointer;
            /*-------------------------房源对比栏-------------------------*/
            >.duibi-bar {
                z-index: 10;
                cursor: pointer;
                >.iconfont {
                    width: 40px;
                    height: 40px;
                    line-height: 40px;
                    font-size: 20px;
                    color: #fff;
                    background: #0c84e4;
                    text-align: center;
                    position: relative;
                    >article{
                        position: fixed;
                        right: 10px;
                        bottom: 210px;
                        width: 400px;
                        background: #f9fafd;
                        padding: 10px;
                        box-shadow: 0 0 30px rgba(0, 0, 0, 0.15);
                        z-index: 100;
                        transform: scale(0);
                        -webkit-transform: scale(0);
                        transform-origin: 100% 100%;
                        -webkit-transform-origin: 100% 100%;
                        transition: transform ease .3s, opacity ease .3s;
                        -webkit-transition: all ease .3s;
                        -moz-transition: all ease .3s;
                        -ms-transition: all ease .3s;
                        -o-transition: all ease .3s;
                        opacity: 0;
                        >header{
                            margin: 10px 0;
                            text-align: left;
                            border-bottom: 1px solid #E6E6E6;
                            padding: 10px 0;
                            >button{
                                float: right;
                            }
                            >span{
                                font-size: 13px;
                                color: #6F716E;
                            }
                        }
                        >.duibi-house-content{
                            >ul {
                                position: relative;
                                > li {
                                    margin: 10px 0;
                                    .ant-card {
                                        border: none;
                                        background: inherit;
                                        > .ant-card-body {
                                            padding: 0;
                                            > a {
                                                float: left;
                                                display: inline-block;
                                                cursor: pointer;
                                                overflow: hidden;
                                                > img {
                                                    width: 120px;
                                                    height: 90px;
                                                    -webkit-transition: all linear 1s;
                                                    -moz-transition: all linear 1s;
                                                    transition: all linear 1s;
                                                }
                                            }
                                            > aside {
                                                float: right;
                                                width: calc(~"100% - 120px");
                                                padding: 0 0 0 12px;
                                                font-size: 15px;
                                                position: relative;
                                                > a {
                                                    color: #38485a;
                                                    font-weight: bold;
                                                    cursor: pointer;
                                                }
                                                > a:hover {
                                                    color: #00b8ee;
                                                }
                                                p {
                                                    width: 100%;
                                                    color: #878787;
                                                    margin: 4px 0;
                                                    > i {
                                                        color: #0087e5;
                                                    }
                                                }
                                                p.house-price {
                                                    color: #f65248;
                                                }
                                                > em {
                                                    font-size: 14px;
                                                    color: #005aa0;
                                                    position: absolute;
                                                    bottom: 0;
                                                    right: 0;
                                                    display: none;
                                                }
                                            }
                                            > aside:hover {
                                                > em {
                                                    display: block;
                                                }
                                            }
                                        }
                                    }
                                }
                                >li:hover{
                                    .ant-card {
                                        > .ant-card-body {
                                            > a {
                                                > img {
                                                    -webkit-transform: scale(1.1, 1.1);
                                                    -moz-transform: scale(1.1, 1.1);
                                                    transform: scale(1.1, 1.1);
                                                }
                                            }
                                        }
                                    }
                                }
                            }
                        }
                    }
                    >.HouseContrast-active{
                        transform: scale(1) !important;
                        -webkit-transform: scale(1) !important;
                        opacity: 1 !important;
                    }
                }
                >.iconfont:hover{
                    >article {
                        transform: scale(1) !important;
                        -webkit-transform: scale(1) !important;
                        opacity: 1 !important;
                    }
                }
            }
            >.HelpMeFindHouse{
                display: block;
                .ant-btn{
                    width: 40px;
                    height: 40px;
                    line-height: 40px;
                    background: #41aaee;
                    text-align: center;
                    font-size: 20px;
                    color: #fff;
                    padding: 0px;
                    border-radius: 0px;
                    border: none;
                }
            }
            >.qrcode{
                display: block;
                width: 40px;
                height: 40px;
                background: url(/static/img/backTop-erweima.png) no-repeat #02a2aa center center;
                background-size: auto;
                >div{
                    width: 200px;
                    height: 200px;
                    position: absolute;
                    left: -202px;
                    top: -77px;
                    background: url(/static/img/HMYS-dingyuehao.jpg) no-repeat;
                    background-size: cover;
                    opacity: 0;
                    transform: scale(0);
                    -webkit-transform: scale(0);
                    transform-origin: 100% 70%;
                    -webkit-transform-origin: 100% 70%;
                    transition: transform ease .3s, opacity ease .3s;
                    -webkit-transition: all ease .3s;
                    -moz-transition: all ease .3s;
                    -ms-transition: all ease .3s;
                    -o-transition: all ease .3s;
                }
            }
            >.qrcode:hover{
                >div{
                    display: block;
                    transform: scale(1);
                    -webkit-transform: scale(1);
                    opacity: 1;
                }
            }
            >.ant-back-top {
                > .top {
                    width: 40px;
                    height: 40px;
                    display: block;
                    background: url(/static/img/backTop.png) no-repeat;
                    background-size: cover;
                }
            }
        }
    }
</style>
